
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--侧边部门数据-->
      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
        <div class="head-container">
          <el-input v-model="deptName" clearable size="small" placeholder="输入部门名称搜索" :prefix-icon="Search"
            class="filter-item" @input="getDeptDatas" />
        </div>
        <el-tree @node-click="handleNodeClick" :data="deptDatas" :props="defaultProps" :expand-on-click-node="false"
          default-expand-all />
      </el-col>
      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <div class="head-container">
          <!-- {{crud.dialogFormVisible}} -->
          <operation />
          <el-table :data="crud.data" style="width: 100%" v-loading="crud.loading"
            @selection-change="crud.selectionChangeHandler">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" width="80" />
            <el-table-column prop="username" label="用户名" width="80" />
            <el-table-column prop="departmentName" label="部门" width="100" />

            <el-table-column prop="roleNames" label="角色" width="90" />
            <el-table-column prop="email" label="邮箱" width="180" />
            <el-table-column prop="phone" label="手机" width="120" />
            <el-table-column prop="z" label="状态" width="80">

              <template #default="scope">

                <el-tag>{{ scope.row.status == 1 ? '启用' : '未启用' }}</el-tag>
              </template>

            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间" width="160" />
            <el-table-column prop="updatedAt" label="修改时间" width="160" />
            <el-table-column label="操作" width="240" align="center" fixed="right">
              <template #default="scope">
                <udOperation :data="scope.row" @uploadpassdata="uploadpassdata" />
              </template>
            </el-table-column>
          </el-table>
          <pagination />


        </div>
      </el-col>



      <el-dialog append-to-body :close-on-click-modal="false" v-model="userFormVisible" title="修改密码" width="580px">

        <div>

        </div>
        <el-form ref="dataFormRef" :model="formdata" size="small" label-width="80px">
          <el-form-item label="密码" prop="password">
            <el-input v-model="formdata.password" />
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:right">
          <el-button type="text" @click="reason">取消</el-button>
          <el-button :loading="loading" type="primary" @click="submit">确认</el-button>
        </div>
      </el-dialog>
    </el-row>
    <eForm v-if="crud.dialogFormVisible" :deptlist="deptDatas" :rolelist="roleData" />
  </div>
</template>

<script setup lang="ts">
import crudUSER, { uploadpswd } from '/@/api/system/user';
import { getDepts } from '/@/api/system/dept';

import { rolelist } from '/@/api/system/role';
import { useRouter } from "vue-router";
import pagination from "/@/crud/Pagination.vue";
import eForm from "./model/form.vue";
import udOperation from "./model/udOperation.vue";
import { Search } from '@element-plus/icons-vue';
import { crud, CRUD } from '/@/crud/crud';
import operation from "/@/crud/operation.vue";
import { ref, reactive, watch, computed, getCurrentInstance } from "vue";

import { ElMessage } from 'element-plus'
CRUD({ title: '用户', url: 'admin/sys/user/page', type: 'post', crudMethod: { ...crudUSER } })
const deptName = ref("");
const { proxy } = getCurrentInstance();
const deptDatas = ref([]);
const defaultProps = { children: 'children', label: 'name', isLeaf: 'leaf' }
const formdata = reactive({
  password: ""

})
const userId = ref("");
const dataFormRef = ref()
const loading = ref(false)
const userFormVisible = ref(false)
const roleData = ref([])
const getDeptDatas = () => {
  getDepts({}).then(res => {
    deptDatas.value = formatDeptTree(res.data)
    console.log(deptDatas.value)
  })
}
getDeptDatas()



const getrolesDatas = () => {
  rolelist({}).then(res => {
    roleData.value = res.data.list

  })
}

getrolesDatas()


const uploadpassdata = (data) => {

  if (dataFormRef.value) {
    dataFormRef.value.resetFields()

  }

  userId.value = data.id
  userFormVisible.value = true

}

const reason = () => {

  userFormVisible.value = false


}
const submit = () => {
  if (formdata.password) {
    loading.value = true
    let data = { password: formdata.password, userId: userId.value }

    uploadpswd(data).then((res: any) => {
      ElMessage.success('修改成功')

      loading.value = false
      userFormVisible.value = false

    })
  } else {

    ElMessage.warning('请输入密码')
    loading.value = false
    return


  }





}


const formatDeptTree = (
  depts: any,
  parentId: number | null = null,
  keyPath: (string | number)[] = [],
): any => {
  return depts
    .filter((item) => item.parentId === parentId)
    .map((item) => {
      const _keyPath = keyPath.concat(parentId || []);
      const arr = formatDeptTree(depts, item.id, _keyPath);
      return Object.assign(item, {
        keyPath: _keyPath,
        title: item.name,
        label: item.name,
        key: item.id,
        value: item.id,
        formData: item,
        children: arr.length ? arr : null,
      });
    });
};

const handleNodeClick = (data: any) => {
  console.log(data.id)
  crud.query.departmentIds = [data.id]
  crud.toQuery()
}
</script>

